<template>
	<view class="home-container">
		<!-- <scroll-view style="height: 100%;" scroll-y="true"> -->
		<div class="container">
			<view class="head">
				<view class="head-container">
					<view class="user">
						<view class="user-avatar">
							<u-avatar size="100" :src="avatarUrl"></u-avatar>
						</view>
						<view class="user-info">
							<view class="user-name">{{ vuex_user.nickName }}</view>
							<view class="user-role">{{ vuex_user.remark }}</view>
						</view>
					</view>

					<view class="setting">
						<!-- <button v-if="dev === 'development'" @click="test">test</button> -->
						<!-- <u-button v-if="dev === 'development'" size="mini" type="default" @click="test">测试</u-button> -->
						<uni-icons type="gear" size="27" :color="setting.color" @click="toPage(setting)"></uni-icons>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="main-container">
					<view class="main-wrap">
						<view class="page-box" :class="{ 'active': currentIndex == index }" v-for="(page, index) in pages" :key="index" :style="{ 'color': page.color }" @click="toPage(page, index)">
							<!-- {{page.text}} -->
							<view class="wrap">
								<image class="bg-img" :src="page.bgImg" mode=""></image>
								<view class="text">
									<text>{{ page.text }}</text>
								</view>
								<view class="icon">
									<!-- <image :src="page.icon" mode="widthFix"></image> -->
									<image :src="page.icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</div>
		<!-- </scroll-view> -->
	</view>
</template>
<script>
	import {
		tabbar
	} from '@/const/tabbar';
	import {
		getFileContextAsync,
		getFileEntryAsync,
		iterateDierctory,
		getLocalNotice,
		createLocalNotice吗,
	} from '@/static/common/js/loUtil.js'
	export default {
		data() {
			return {
				tabbar,
				pages: [{
						pagePath: "/pages/sys/archives/add",
						text: "新增案卷",
						color: '#057FD0',
						bgImg: '/static/aidex/images/archives-add-bg.png',
						icon: '/static/aidex/images/archives-add.png'
					},
					{
						pagePath: "/pages/sys/detail/index",
						text: "当前案卷",
						color: '#FC3D4C',
						bgImg: '/static/aidex/images/detail-index-bg.png',
						icon: '/static/aidex/images/detail-index.png',
					},
					{
						pagePath: "/pages/sys/workbench/list",
						text: "案卷库",
						color: '#00C21E',
						bgImg: '/static/aidex/images/workbench-list-bg.png',
						icon: '/static/aidex/images/workbench-list.png',
					},
					{
						pagePath: "/pages/sys/msg/index",
						text: "我的消息",
						color: '#F58738',
						bgImg: '/static/aidex/images/msg-index-bg.png',
						icon: '/static/aidex/images/msg-index.png',
					}
				],
				setting: {
					pagePath: "/pages/sys/user/index",
					text: "我的",
					color: '#333'
				},
				currentIndex: null,
				dev: process.env.NODE_ENV
			}
		},
		computed: {
			avatarUrl() {
				if (!this.vuex_user.avatar) {
					return '/static/aidex/images/user01.png'
				}
				let url = this.vuex_config.baseUrl + this.vuex_user.avatar
				url = this.replaceAll(url, '\\', '/');
				return url + '?t=' + new Date().getTime();
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			async test() {
				// uni.navigateTo({
				// 	url: '/pagesA/bluetooth/bluetooth?archivesId=553&keyId=1&imgIndex=0'
				// });
				const targetPath = 'archiveId_560'
				const noticePath =
					`${targetPath}/evidence_notice.txt`
				let res = await getFileContextAsync(
					noticePath)
				let noticeData = JSON.parse(res.result)
				let arr = []
				noticeData = noticeData.map(notice => {
					if (notice.mapList && notice.mapList.length) {
						notice.mapList.forEach(item => {
							// 检查是否存在fileList以及fileList是否非空
							if (item.fileList && item.fileList.length) {
								item.fileList = item.fileList.map(file => {
									// 确保file.url是字符串且包含"targetPath"
									if (typeof file.url === 'string' && file.url.includes(targetPath)) {
										arr.push({
											dictId: notice.dictId,
											keyId: item.keyId
										})
										let newStr = file.url.replace(targetPath, "archiveId_666");
										return {
											...file,
											url: newStr
										}
									}
									// 如果不满足条件，保持原样返回
									return file;
								})
							}
						})
					}
					return notice;
				})
				console.log(arr);
				const promises = arr.map(async item => {
					const url = `_doc/${targetPath}/evidence_${item.dictId}_${item.keyId}.txt`
					let res = await getFileContextAsync(url)
					console.log(res);
					const localModuleData = res.result ? JSON.parse(res.result) : {}
					const newData = localModuleData.fileList.map(file => {
						let newStr = file.url.replace(targetPath, "archiveId_666");
						return {
							...file,
							url: newStr
						}
					})
					return {
						url,
						res
					}
				})
				const results = await Promise.all(promises)
				console.log(results);
				results.map(async resObj => {
					console.log(resObj);
					const result = resObj.res.result ? JSON.parse(resObj.res.result) : {}
					console.log(result);
					const newData = result.fileList.map(file => {
						let newStr = file.url.replace(targetPath, "archiveId_666");
						return {
							...file,
							url: newStr
						}
					})
					console.log(newData);
				})
				// console.log(noticeData);
				// await iterateDierctory()
				// fileList.forEach(file => {
				// let str = file.url;
				// let newStr = str.replace("archiveId_559", "archiveId_666");
				// console.log(newStr);
				// })
			},
			toPage(page, index = null) {
				if (page.pagePath == '/pages/sys/msg/index' && !this.vuex_config.isConnected) {
					uni.showModal({
						title: '提示',
						content: '离线功能暂未开发，敬请期待',
					})
					return
				}
				this.currentIndex = index
				setTimeout(() => {
					this.currentIndex = null
					if (page.pagePath != this.setting.pagePath) {
						uni.removeStorageSync("getArchivesinfo");
						this.$u.vuex('vuex_archives', {});
						uni.navigateTo({ 
							url: page.pagePath
						});
					} else {
						uni.switchTab({
							url: page.pagePath
						});
					}
				}, 300)
			}
		}
	};
</script>
<style lang="scss" scoped>
	.home-container {
		background-color: #fff;
		height: 100vh;
		overflow: hidden;
		--main-bg: #fff;
		color: #333
	}

	.status-bar {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #ddd;
		box-sizing: border-box;
	}

	.container {
		padding: 16rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.head {
		overflow: hidden;
		background-color: var(--main-bg);
		margin-bottom: 26rpx;
		min-height: 140rpx;

		.head-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 18rpx 90rpx;

			.user {
				display: flex;
				align-items: stretch;
				justify-content: space-between;

				.user-avatar {
					margin-right: 30rpx;
				}

				.user-info {
					// padding: 36rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.user-name {
						font-weight: bold;
						font-size: 32rpx;
						color: #282828;
						margin-bottom: 28rpx;
					}

					.user-role {
						font-size: 26rpx;
						color: #333;
					}
				}
			}

			.setting {
				position: relative;
				z-index: 10;
			}
		}

	}

	.main {
		flex: 1;
		background-color: var(--main-bg);
		position: relative;
		padding: 32rpx 0;

		.main-container {
			position: relative;
			z-index: 10;
			margin: 0 164rpx;
			height: 100%;
		}

		.main-wrap {
			position: relative;
			z-index: 10;
			height: 100%;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
		}

		.page-box {
			// flex: 0 0 calc(50% - 32rpx);
			flex-basis: calc(50% - 16px);
			flex-grow: 1;
			transition: 0.25s;
			// padding: 32rpx;

			.wrap {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;

				.bg-img {
					position: absolute;
					z-index: -1;
				}

				.text,
				.icon {
					flex: 1;
				}

				.text {
					text-align: center;
					font-size: 40rpx;
					font-weight: 600;
				}

				.icon {
					text-align: right;
					height: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: flex-end;
					padding-right: 20rpx;
					width: 100%;
					padding-top: 70rpx;

					image {
						// width: 100%;
						flex: 1;
					}
				}
			}

			&.active {
				transform: scale(1.2);
				box-shadow: 0 3px 11px 2px #00000080;
			}
		}

		// .page::after {
		// 	opacity: 0;
		// 	box-shadow: 0 3px 11px 2px #00000080;
		// 	transition: .3s;
		// }
		// .page:active::after{
		// 	box-shadow: none;
		// 	opacity: 1;
		// 	transform: 0s;
		// 	background-color: #000 !important;
		// }
	}
</style>